<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>自助界面</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../static/css/bootstrap-table.min.css" rel="stylesheet" />
    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/bootstrap-table.min.js"></script>
    <style>
        #Nav{
            position: absolute;
            left: 32vw;
            top: 5px;
        }
        #detail{
            background-color: #dddddd;
            border-radius: 5px;
            width: 150px;
            position: relative;
            left: 5px;
            top: 5px;
        }
        #QRcodeImg{
            background: url('../static/pay.png') no-repeat 0px 0px;
            width: 195px;
            height: 220px;
            position: absolute;
            z-index:22;
            border: 2px solid green;
            display: none;
        }
        #img:focus #QRcodeImg{
            display:block;
        }
    </style>
</head>
<body>
    <div id="detail"></div>
    <div id="Nav"><span>积点兑换：</span><input type="text" id="key"> <button class="btn-danger" onclick="pay()">兑换</button> <button id="img" class="btn-danger"><div id="QRcodeImg"></div>获取积点</button> <button id="log" class="btn-danger">运行详情</button></div>
    <div style="margin:100px auto;width:1000px;">
        <table id="table"></table>
    </div>
    <script>
        let fbtn=false;
        let username=document.cookie.slice(9,);
        $.get("/state?username=" + username,function (data) {if (data === '0') {fbtn = true;}});
        $.get("/point?username=" + username,function (data) {document.getElementById('detail').innerHTML="学号："+username+"<br\>积分："+data*5});
        $('#log').click(function (){window.open("/log?username="+username)})
        $('#table').bootstrapTable({
            url: "/getcourse",                         // URL
            method: "post",                                        // 请求类型
            contentType: "application/x-www-form-urlencoded",      // post请求必须要有，否则后台接受不到参数
            queryParams: "username=" + username,               //传递参数
            columns: [{
                field: 'name',
                title: '课程名',
                align: "center",
                halign: "center",
                valign: 'middle',
            },
            {
                field: 'courseOpenId',
                title: '编号',
                align: "center",
                halign: "center",
                valign: 'middle',
            },
            {
                field: 'process',
                title: '当前进度(%)',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: 200,
                events: {
                    'click #action':function (e, value, row, index){
                        if (row.process.toString()==='100')
                            alert("此课程已学完");
                        else{
                            let pt = prompt("请输入你希望观看此课ppt单个时长（分钟）:\n《"+row.name+"》","0");
                            if(pt===null)return;
                            if(!isNaN(pt))
                                $.post('/run',{'username':username,'courseOpenId':row.courseOpenId,'pt':pt},function (data){alert(JSON.parse(data));location.reload();});
                            else
                                alert("请输入纯数字");
                        }
                    }
                },
                formatter: function () {
                    let r='<button class="btn btn-info" disabled>正在运行</button>';
                    if (fbtn)
                        r='<button id="action" class="btn btn-info"">执行</button>';
                    return r;
                }
            }]
        })
        function pay(){$.post('/pay',{'username':username,'data':$('#key').val()},function (data){alert(JSON.parse(data));$('#key').val('');location.reload();});}
    </script>
</body>
</html>
